<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'团队管理'"></Hearder>
		<!-- #endif -->
		<view class="v_one" v-if="JSON.stringify(info) !='{}'">
			<view class="v_two">
				<view>{{info.statistics.totalCount}}</view>
				<view>总团队</view>
			</view>
			<view class="v_two">
				<view>{{info.statistics.driveCount}}</view>
				<view>直推总数</view>
			</view>
		</view>
		<view style="padding: 0rpx 3% 24rpx;"  v-if="JSON.stringify(info) !='{}'">
			<view class="r_three" v-for="(item,index) in info.list" :key="item.member_id">
				<view class="r_four">
					<view class="r_five">
						<view>
							<image class="five_img" :src="item.avatarUrl"></image>
						</view>
						<view>{{item.nickName}}<text>({{item.message}})</text></view>
					</view>
					<view class="r_six">{{item.mobile}}</view>
				</view>
				<view class="r_seven">
					<view class="r_eight wid300">直推人数:{{item.drive_num}}人</view>
					<view class="r_eight">会员级别:{{item.identity_name}}</view>
					<view class="r_eight wid300">累计收益:{{item.total_earnings}}元</view>
					<view class="r_eight">7日内收益:{{item.week_earnings}}元</view>
				</view>
				<view class="r_nine">
					<view class="r_nine_two" @click="goPage('charge?member_id='+item.member_id)">代充</view>
					<view class="r_nine_two" @click="goPage('mydetail?member_id='+item.member_id)">个人详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				info:{},
				member_id:''
			}
		},
		onLoad(e) {
			if(e.member_id){
				this.member_id = e.member_id
			}
			this.getData()
		},
		methods: {
			getData() {
				var that = this;
				this.request('/team/driveDetail', {
					member_id:that.member_id
				}).then(res => {
					if (res.data.code == 1) {
						that.info = res.data.data
					}
				})
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.r_three {
		margin-top: 20rpx;
		background-color: white;
		border-radius: 10rpx;
		.r_nine {
			display: flex;
			justify-content: flex-end;
	        padding: 20rpx;
			.r_nine_two {
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: white;
				font-size: 24rpx;
				background: #1D9AF6;
				border-radius: 10rpx;
				margin-left: 20rpx;
				&:nth-of-type(2){
					background: linear-gradient(to top,#F63C3C,#FF5A4E);
				}
			}
		}
	
		.r_seven {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #f8f8f8;
			padding: 0 20rpx;
			.r_eight {
				width: 50%;
				margin-bottom: 24rpx;
				font-size: 24rpx;
				color: #000;
			}
		}
	
		.r_four {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #f8f8f8;
			height: 104rpx;
			padding: 0 20rpx;
			.r_six {
				font-size: 26rpx;
			}
	
			.r_five {
				display: flex;
				align-items: center;
	
				.five_img {
					width: 43rpx;
					height: 43rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}
	
				>view {
					&:nth-of-type(2) {
						font-size: 28rpx;
						text{
							color: #FF3A37;
						}
					}
				}
			}
		}
	}
	.v_one{
		background: linear-gradient(0deg, #F63C3C 0%, #FF5A4E 100%);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 150rpx;
		margin: 20rpx 3% 0;
		.v_two{
			>view{
				&:first-of-type{
					color: white;
					font-weight: 600;
					font-size: 32rpx;
					text-align: center;
				}
				&:nth-of-type(2){
					color: white;
					font-size: 24rpx;
					text-align: center;
					margin-top: 15rpx;
				}
			}
		}
	}
    page{
		background-color: #F5F5F5;
	}
</style>
